<template>
	<view class="container">
		<fu-navbar title="维修中" bgColor="#0f68f0" color="#fff"></fu-navbar>
		<view class="tab-box">
			<view class="tab" :class="{'tab-active': current == 0}" @click="tabChange(0)">报修详情</view>
			<view class="tab" :class="{'tab-active': current == 1}" @click="tabChange(1)">更换备件</view>
			<view class="tab" :class="{'tab-active': current == 2}" @click="tabChange(2)" v-if="repState == 7">维修详情</view>
			<view class="tab" :class="{'tab-active': current == 3}" @click="tabChange(3)">经验库</view>
		</view>
		<view style="margin-top: 90rpx;"></view>
		<block v-if="current == 0">
			<view class="tit-box">
				<view class="title">报修信息</view>
				<view class="state">
					<image src="../../../static/images/icon18.png" mode="aspectFill" class="icon" v-if="form.urgencyLevel == 1 || form.urgencyLevel == 2"></image>
					<image src="../../../static/images/icon18.png" mode="aspectFill" class="icon" v-else></image>
					<text>{{form.urgencyLevelName}}</text>
				</view>
			</view>
			<view class="con-box">
				<view class="item border-b over-hidden">
					<view class="label flex-shrink">报修单号：</view>
					<view class="con text-ellipsis">{{form.workOrderCode || ''}}</view>
					<view class="flex-shrink fs-24 flex flex-column align-center" v-if="repState == 8">
						<view style="color: #F65380;">倒计时</view>
						<countDown :timeDifference="mainInfo.countDownTime" dotColor="#F65380" Color="#F65380" ></countDown>
					</view>
				</view>
				<view class="item border-b">
					<view class="label">设备编号：</view>
					<view class="con">{{form.emCode || ''}}</view>
				</view>
				<view class="item border-b">
					<view class="label">位置：</view>
					<view class="con">{{form.emLocation || ''}}</view>
				</view>
				<view class="item border-b">
					<view class="label">故障类别：</view>
					<view class="con">{{form.repFaultTypeName}}</view>
				</view>
				<view class="item border-b">
					<view class="label">设备状态：</view>
					<view class="con">{{form.repEmStateName || ''}}</view>
				</view>
				<view class="item border-b">
					<view class="label">故障描述：</view>
					<view class="con">{{form.repDesc || ''}}</view>
				</view>
				<view class="item border-b">
					<view class="label">报修人：</view>
					<view class="con flex align-center">
						<view class="flex-1 flex align-center text-ellipsis">
							<text style="margin-right: 24rpx;">{{form.repEmployeeName}}</text>
							<text class="text-ellipsis">{{form.repStartTime}}</text>
						</view>
						<image src="../../../static/images/icon21.png" mode="aspectFill" class="tel" @click="call(form.repEmployeeNum)"></image>
					</view>
				</view>
				
				<view class="item border-b" @click="toJumpTeam">
					<view class="label">维修组成员：</view>
					<view class="con flex align-center">
						<view class="flex-1 flex align-center text-ellipsis">
							<text style="margin-right: 24rpx;">{{getMainTeamName}}</text>
						</view>
					</view>
				</view>
				
				<view class="item border-b">
					<view class="label">音频：</view>
					<view class="con flex align-center" @click="playAudio(item, index)" v-for="(item, index) in form.audioList" :key="index">
						<image src="../../../static/images/play.png" mode="aspectFill" class="play" v-if="!item.isPlay"></image>
						<image src="../../../static/images/stop.png" mode="aspectFill" class="play" v-else></image>
						<view class="audio text-ellipsis">{{item.fileName}}</view>
					</view>
				</view>
				<view class="item border-b">
					<view class="label">图片：</view>
					<view class="con flex align-center">
						<image class="img" :src="`${read_url}${item.fileCode}`" mode="aspectFill" v-for="(item, index) in form.picList" :key="index" @click="previewImg(item, 1)"></image>
					</view>
				</view>
				<view class="item">
					<view class="label">视频：</view>
					<view class="con flex align-center flex-wrap">
						<block v-for="(item, index) in form.videoList" :key="index">
							<view class="v-img" @click="playVideo(item, 1, index)" v-if="!item.isPlay">
								<image src="" mode="aspectFill" lazy-load class="img"></image>
								<image class="v-play" src="../../../static/images/video-bg.png"></image>
							</view>
							<video class="v-img" :src="`${read_url}${item.fileCode}`" :id="`myVideo${index}`" @fullscreenchange="fullscreenchange($event, index, 1)" @ended="videoEnd($event, index, 1)" v-else></video>
						</block>
					</view>
				</view>
			</view>
			<block v-if="repState == 8">
				<view class="tit-box">
					<view class="title">审核信息</view>
				</view>
				<view class="con-box yijian">
					<view class="item border-b">
						<view class="label">审核人：</view>
						<view class="con flex align-center text-ellipsis">
							<view style="margin-right: 24rpx;">{{audInfo.employeeName}}</view>
							<view class="text-ellipsis">{{audInfo.annTime}}</view>
						</view>
					</view>
					<view class="item border-b">
						<view class="label">审核：</view>
						<view class="con flex">
							<view class="audstate">{{audInfo.annStateName}}</view>
						</view>
					</view>
					<view class="item">
						<view class="label">审核意见：</view>
						<view class="con">{{audInfo.annExplain}}</view>
					</view>
				</view>
			</block>
		</block>
		<block v-if="current == 1">
			<view class="tit-box">
				<view class="title">维修备件</view>
			</view>
			<view class="bg-f padding-tb-12">
				<view class="bj-item padding-lr-24" v-for="(item, index) in partList" :key="index">
					<view class="fs-28" style="padding-top: 12rpx;">{{item.name}}</view>
					<view class="flex justify-between over-hidden fs-26 padding-tb-12" style="align-items: flex-start;">
						<view class="flex align-center">
							<image src="../../../static/images/no-img.png" class="img flex-shrink" mode="aspectFill"></image>
							<view class="over-hidden">
								<view class="text-ellipsis">编码：{{item.code}}</view>
								<view style="padding-top: 16rpx;">型号：{{item.specs}}</view>
							</view>
						</view>
						<view class="flex align-center">
							<image src="../../../static/images/jian.png" class="add"></image>
							<view class="padding-lr-16">{{item.num}}</view>
							<image src="../../../static/images/jia.png" class="add"></image>
						</view>
					</view>
				</view>
				<view class="no-data flex justify-center" v-if="partList.length == 0">
					<image src="../../../static/empty/no-data.png" class="img" mode="widthFix"></image>
				</view>
			</view>
		</block>
		<block v-if="current == 2">
			<view class="tit-box">
				<view class="title">维修前信息</view>
			</view>
			<view class="bg-f padding-lr-24">
				<view class="wx-item flex justify-between border-b-f7">
					<text class="label flex-shrink">音频</text>
					<view class="con over-hidden">
						<view class="flex align-center over-hidden padding-tb-12" @click="playAudio(item, index, 'old')" v-for="(item, index) in oldAudio" :key="index">
							<image src="../../../static/images/play.png" mode="aspectFill" class="play" v-if="!item.isPlay"></image>
							<image src="../../../static/images/stop.png" mode="aspectFill" class="play" v-else></image>
							<view class="audio text-ellipsis">{{item.fileName}}</view>
							<image src="../../../static/images/delete.png" mode="widthFix" style="width: 32rpx;" class="margin-l-24 flex-shrink" @click.stop="delFile(item, index, 'oldAudio')"></image>
						</view>
					</view>
					<view class="flex-shrink padding-lr-24"  @longtap="longpressBtn" @touchmove="handleTouchMove" @touchstart="longpressBtn" @touchend="touchendBtn($event, 'old')" @click="touchAudioBtn()" v-if="oldAudio.length < 9">
						<image src="../../../static/images/icon27.png" mode="widthFix" class="a-icon"></image>
					</view>
				</view>
				<view :class="longPress == '1' ? 'record-layer' : 'record-layer1'" @click="longPress = 1">
					<view :class="longPress == '1' ? 'record-box' : 'record-box1'">
						<view class="record-btn-layer">
							<button class="record-btn" :class="longPress == '1' ? '' : 'record-btn-2'"
								:style="VoiceTitle != '松开手指,取消发送' && longPress != '1'?'background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);':'background-color: rgba(0, 0, 0, 0);color:white'">
								<image src="../../../static/images/icon30.png" mode=""></image>
								<text>{{VoiceText}}</text>
							</button>
						</view>
						<!-- 语音音阶动画 -->
						<view
							:class="VoiceTitle != '松开手指,取消发送'?'prompt-layer prompt-layer-1':'prompt-layer1 prompt-layer-1'"
							v-if="longPress == '2'">
							<view class="prompt-loader">
								<view class="em" v-for="(item,index) in 15" :key="index"></view>
							</view>
							<text class="span">{{VoiceTitle}}</text>
						</view>
					</view>
				</view>
				<view class="wx-item flex border-b-f7">
					<text class="label flex-shrink">图片</text>
					<view class="flex align-center flex-1 flex-wrap">
						<view class="img-box" v-for="(item, index) in oldPics" :key="index">
							<image :src="`${read_url}${item.fileCode}`" mode="aspectFit" class="img" @click="previewImg(item, 2)"></image>
							<image src="../../../static/images/close.png" class="close" @click.stop="delFile(item, index, 'oldImg')"></image>
						</view>
					</view>
					<view class="flex-shrink padding-lr-24" v-if="oldPics.length < 9">
						<image src="../../../static/images/icon28.png" mode="widthFix" class="i-icon" @click="uploadImg('img', 'old')"></image>
					</view>
				</view>
				<view class="wx-item flex justify-between">
					<text class="label flex-shrink">视频</text>
					<view class="flex align-center flex-1 flex-wrap">
						<block v-for="(item, index) in oldVideo" :key="index">
							<view class="img-box" v-if="!item.isPlay" @click.stop="playVideo(item, 'old', index)">
								<image src="" mode="aspectFill" lazy-load class="img" style="background-color: #000;"></image>
								<image src="../../../static/images/video-bg.png" mode="aspectFill" class="v-play"></image>
								<image src="../../../static/images/close.png" class="close" @click.stop="delFile(item, index, 'oldVideo')"></image>
							</view>
							<view class="img-box" v-else>
								<video :src="`${read_url}${item.fileCode}`" class="img" :id="`oldVideo${index}`" @fullscreenchange="fullscreenchange($event, index, 'old')" @ended="videoEnd($event, index, 'old')"></video>
							</view>
						</block>
					</view>
					<view class="flex-shrink padding-lr-24" v-if="oldVideo.length < 9">
						<image src="../../../static/images/icon29.png" mode="widthFix" class="i-icon" @click="uploadImg('video', 'old')"></image>
					</view>
				</view>
			</view>
			
			
			<view class="bg-f padding-lr-24 margin-t-24">
				<view class="flex align-center justify-between border-b-f7 padding-tb-24 fs-28">
					<view><text class="required-star">*</text>故障类型</view>
					<view class="flex align-center" @click="toggleTab('type')">
						<view>{{typeValue.dictName}}</view>
						<image src="../../../static/images/arrow-r.png" class="arrow-r"></image>
					</view>
				</view>
				<view class="flex align-center justify-between border-b-f7 padding-tb-24 fs-28">
					<view><text class="required-star">*</text>故障原因</view>
					<view class="flex align-center" @click="toggleTab('reason')">
						<view>{{reasonValue.dictName}}</view>
						<image src="../../../static/images/arrow-r.png" class="arrow-r"></image>
					</view>
				</view>
				<view class="flex align-center justify-between padding-tb-24 fs-28">
					<view><text class="required-star">*</text>设备状态</view>
					<view class="flex align-center" @click="toggleTab('state')">
						<view>{{stateValue.dictName}}</view>
						<image src="../../../static/images/arrow-r.png" class="arrow-r"></image>
					</view>
				</view>
			</view>
			
			<view class="bg-f margin-t-20 padding-24">
				<view class="fs-28"><text class="required-star">*</text>处理方法及结果</view>
				<textarea placeholder="请描述处理方法及处理结果..." placeholder-class="pla-tra" class="tra" v-model="mtcDesc"></textarea>
			</view>
			
			<view class="bg-f margin-t-20 padding-24">
				<view class="fs-28"><text class="required-star">*</text>现状分析</view>
				<textarea placeholder="请描述现状分析..." placeholder-class="pla-tra" class="tra" v-model="currentStatusAnalysis"></textarea>
			</view>
			
			<view class="tit-box">
				<view class="title">维修后信息</view>
			</view>
			<view class="bg-f padding-lr-24">
				<view class="wx-item flex align-center justify-between border-b-f7">
					<text class="label flex-shrink">音频</text>
					<view class="con over-hidden">
						<view class="flex align-center over-hidden padding-tb-12" @click="playAudio(item, index, 'new')" v-for="(item, index) in newAudio" :key="index">
							<image src="../../../static/images/play.png" mode="aspectFill" class="play" v-if="!item.isPlay"></image>
							<image src="../../../static/images/stop.png" mode="aspectFill" class="play" v-else></image>
							<view class="audio text-ellipsis">{{item.fileName}}</view>
							<image src="../../../static/images/delete.png" mode="widthFix" style="width: 32rpx;" class="margin-l-24 flex-shrink" @click.stop="delFile(item, index, 'newAudio')"></image>
						</view>
					</view>
					<view class="flex-shrink padding-lr-24"  @longtap="longpressBtn" @touchmove="handleTouchMove" @touchstart="longpressBtn" @touchend="touchendBtn($event, 'new')" @click="touchAudioBtn()" v-if="newAudio.length < 9">
						<image src="../../../static/images/icon27.png" mode="widthFix" class="a-icon"></image>
					</view>
				</view>
				
				<view class="wx-item flex border-b-f7">
					<text class="label flex-shrink"><text class="required-star">*</text>图片</text>
					<view class="flex align-center flex-1 flex-wrap">
						<view class="img-box" v-for="(item, index) in newPics" :key="index">
							<image :src="`${read_url}${item.fileCode}`" mode="aspectFit" class="img" @click="previewImg(item, 2)"></image>
							<image src="../../../static/images/close.png" class="close" @click.stop="delFile(item, index, 'newImg')"></image>
						</view>
					</view>
					<view class="flex-shrink padding-lr-24" v-if="newPics.length < 9">
						<image src="../../../static/images/icon28.png" mode="widthFix" class="i-icon" @click="uploadImg('img', 'new')"></image>
					</view>
				</view>
				<view class="wx-item flex justify-between">
					<text class="label flex-shrink">视频</text>
					<view class="flex align-center flex-1 flex-wrap">
						<block v-for="(item, index) in newVideo" :key="index">
							<view class="img-box" v-if="!item.isPlay" @click.stop="playVideo(item, 'new', index)">
								<image src="" mode="aspectFill" lazy-load class="img" style="background-color: #000;"></image>
								<image src="../../../static/images/video-bg.png" mode="aspectFill" class="v-play"></image>
								<image src="../../../static/images/close.png" class="close" @click.stop="delFile(item, index, 'newVideo')"></image>
							</view>
							<view class="img-box" v-else>
								<video :src="`${read_url}${item.fileCode}`" class="img" :id="`newVideo${index}`" @fullscreenchange="fullscreenchange($event, index, 'new')" @ended="videoEnd($event, index, 'new')"></video>
							</view>
						</block>
					</view>
					<view class="flex-shrink padding-lr-24" v-if="newAudio.length < 9">
						<image src="../../../static/images/icon29.png" mode="widthFix" class="i-icon" @click="uploadImg('video', 'new')"></image>
					</view>
				</view>
			</view>
		</block>
		
		<block v-if="current == 3">
			<view class="bg-f padding-24 zs-box">
				<view class="flex align-center margin-b-20" @click="navTo('/pages/knowledge/classify/index')">
					<image src="../../../static/images/icon44.png" class="t-icon margin-r-12" mode="widthFix"></image>
					<view class="text-bold fs-32 margin-r-12">{{faultType}}</view>
					<image src="../../../static/images/arrow-b-1.png" class="arrow-b" mode="widthFix"></image>
				</view>
				<view class="search-box flex padding-lr-24 padding-tb-12 align-center" @click="navTo(`/pages/knowledge/search/index`)">
					<image src="../../../static/images/search-c2.png" mode="aspectFill" class="search-icon margin-r-24 flex-shrink"></image>
					<view class="pla-ipt">搜索知识</view>
					<view class="ipt flex-1" ></view>
				</view>
			</view>
			<!-- <view class="padding-lr-24 padding-tb-12 fs-28 color-a">2024年4月</view> -->
			<view class="zs-list">
				<view class="bg-f padding-24 margin-b-24" @click="navTo(`/pages/knowledge/detail/index?title=${item.knName}&id=${item.knId}`)" v-for="(item, index) in list" :key="index">
					<view class="flex align-center justify-between margin-b-24">
						<view class="fs-30 title text-ellipsis text-bold">{{item.knName}}</view>
						<text class="flex-shrink color-a fs-26">{{item.createTime}}</text>
					</view>
					<view class="flex align-center">
						<image src="../../../static/images/no-img.png" mode="aspectFill" class="img flex-shrink margin-r-24"></image>
						<view class="fs-28 text-cut-3 flex-1 color-9" style="line-height: 1.5;" v-html="item.faultSolution"></view>
					</view>
				</view>
			</view>
			
			<uni-load-more :status="status" v-if="list.length > 5"></uni-load-more>
			
			<!-- 空数据显示 -->
			<fu-empty-ui v-if="list.length == 0 && isInit"></fu-empty-ui>
		</block>
		
		<view class="bottom-wrap">
			<view class="bottom justify-between">
				<block v-if="repState == 7">
					<view class="btn left" @click="suspend()">暂停</view>
					<view class="btn right" @click="apply()">备件申请</view>
					<view class="btn right" @click="save()">保存</view>
					<view class="btn right" @click="completed()">维修完成</view>
				</block>
				<block v-else>
					<view class="btn2 bg-5f" @click="refuse">拒单</view>
					<view class="btn2 bg-218cfa" @click="suspend()">维修开始</view>
				</block>
			</view>
		</view>
		
		<!-- 选择故障类型 -->
		<w-picker mode="selector" :options="typeList" themeColor="#30a3e0" :defaultProps="leverProps" default-type="dictName" @confirm="onConfirm($event, 'type')" ref="type"></w-picker>
		<!-- 选择故障原因 -->
		<w-picker mode="selector" :options="reasonList" themeColor="#30a3e0" :defaultProps="leverProps" default-type="dictName" @confirm="onConfirm($event, 'reason')" ref="reason"></w-picker>
		<!-- 选择设备状态 -->
		<w-picker mode="selector" :options="stateList" themeColor="#30a3e0" :defaultProps="leverProps" default-type="dictName" @confirm="onConfirm($event, 'state')" ref="state"></w-picker>
	</view>
</template>

<script>
import fuNavbar from '@/components/fu-navbar/fu-navbar.vue';
import {UPLOAD_IMAGE_URL, READ_FILE_URL} from '@/common/config.js';
import permission from "@/common/utils/authPermiss.js";
import UploadImage from '@/common/utils/upload-image.js';
import { getCurrentInstance } from 'vue';

const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.src = ''
innerAudioContext.autoplay = false;
export default {
	components: {
		fuNavbar
	},
	computed:{
		getMainTeamName () {
			return this.selectedItems.length ? this.selectedItems.map(item => item.employeeName).join(",") : ''
		}
	},
	data() {
		return {
			form: {},
			repId: '',
			current: 0,
			repState: '',
			mainInfo: {},
			oldPics: [],
			oldAudio: [],
			oldVideo: [],
			newPics: [],
			newAudio: [],
			newVideo: [],
			read_url: READ_FILE_URL,
			isPlay: false,
			videoContext: null,
			oldVideoContext: null,
			newVideoContext: null,
			audioOldList: [],
			audioNewList: [],
			startPoint: {}, //记录长按录音开始点信息,用于后面计算滑动距离。
			longPress: '1', // 1显示 按住 说话 2显示 说话中
			delShow: false, // 删除提示框显示隐藏
			time: 0, //录音时长
			duration: 60000, //录音最大值ms 60000/1分钟
			tempFilePath: '', //音频路径
			startPoint: {}, //记录长按录音开始点信息,用于后面计算滑动距离。
			sendLock: true, //发送锁，当为true时上锁，false时解锁发送
			VoiceTitle: '松手结束录音',
			VoiceText: '按住 说话',
			imgOldList: [],
			imgNewList: [],
			videoOldList: [],
			videoNewList: [],
			mtcDesc: '',
			currentStatusAnalysis: '',
			audInfo: {},
			reasonList: [],
			typeList: [],
			stateList: [],
			leverProps: {
				value: 'dictValue',
				label: 'dictName'
			},
			typeValue: {},
			reasonValue: {},
			stateValue: {},
			oldUploadImgs: [],
			oldUploadAudio: [],
			oldUploadVideo: [],
			newUploadImgs: [],
			newUploadAudio: [],
			newUploadVideo: [],
			page: 1,
			list: [],
			isInit: false,
			status: 'more',
			faultType: '全部知识',
			partList: [],
			selectedItems: [],
		}
	},
	mounted() {
	    uni.$on('refreshPreviousPage', (data) => {
	      this.handleReceivedData(data.data);
	    });
	},
	onLoad(option) {
		this.repId = option.repId
		this.repState = option.repState
		this.init();
		uni.$on('selectClass', data => {
			if (data == '全部知识') {
				this.faultType = '全部知识'
				this.conditions = []
			} else {
				this.faultType = data.faultType
				this.conditions = [
					{
						keyName: 'faultType',
						op: 'EQ',
						val: data.faultType
					}
				]
			}
			this.status = 'more';
			this.page = 1;
			this.getKnowList();
			
		})
	},
	onUnload() {
		uni.$off('selectClass')
	},
	onReady() {
		// this.videoContext = uni.createVideoContext('myVideo0');
		// this.oldVideoContext = uni.createVideoContext('oldVideo0');
		// this.newVideoContext = uni.createVideoContext('newVideo0');
	},
	onPullDownRefresh() {
		if (this.current ==3) {
			this.status = 'more';
			this.page = 1;
			this.getKnowList();
		}
	},
	onReachBottom() {
		if (this.current == 3) {
			if (this.status == 'more') {
				this.getKnowList();
			}
		}
	},
	methods: {
		toJumpTeam(){
			uni.navigateTo({
				url: `/pages/service/select-per-more/index?orderId=${this.mainInfo.id}&type=repReceive&repStartTime=${this.form.repStartTime}`,
				success:(res) => {
					res.eventChannel.emit('acceptData', { selectedItems: this.selectedItems }); 
				}
			})
		},
		handleReceivedData(selectedItems) {
			this.selectedItems = selectedItems;
		},
		navTo(path) {
			uni.navigateTo({
				url: path
			})
		},
		init() {
			this.getData();
			this.selectPartOrderOneByRepair();
			this.getMaintenance();
			if (this.repState == 8) {
				this.getAnnounce();
			}
			this.getFault();
			this.getReason();
			this.getState();
			this.getKnowList();
		},
		toggleTab(ref) {
		  this.$refs[ref].show();
		},
		onConfirm(e, type) {
			console.log(e)
			if (type == 'type') {
				this.typeValue = {
					dictValue: e.value,
					dictName: e.result
				}
			} else if (type == 'reason') {
				this.reasonValue = {
					dictValue: e.value,
					dictName: e.result
				}
			} else if (type == 'state') {
				this.stateValue = {
					dictValue: e.value,
					dictName: e.result
				}
			}
		},
		async getKnowList() {
			if (this.status != 'more') return;
			this.status = 'loading';
			await uni.request({
				url: 'http://150.158.40.124:9001/apiv1/knowledge/base/queryModelListByPage',
				method: 'POST',
				header: {
					'Content-Type': 'application/json',
					'Authorization': global.token || ''
				},
				data: {
					modelCode: 'com.xframe.domain.knowledgeBase.VKnowledgeBase',
					queryKey: 'default',
					ver: "v1",
					refList: ["ALL"],
					sortDir: 'DESC',
					sortName: 'updateTime',
					pageIndex: this.page,
					pageSize: 10,
					recordCountFlag: 'true',
					conditions: this.conditions
				},
				success: res => {
					if (res.data.code == 200) {
						let total = res.data.data.recordCount
						let data = res.data.data.dataList
						if (this.page == 1) this.list = [];
						this.list = this.list.concat(data)
						if (this.list.length < total) {
							this.status = 'more';
							this.page++;
						} else {
							this.status = 'noMore';
						}
					}
					this.isInit = true;
					uni.stopPullDownRefresh();
				},
				complete() {
					uni.stopPullDownRefresh();
				}
			})
		},
		// 查询故障类别
		getFault() {
			this.$api.post(global.apiUrls.selectType, {
				dictTypeCode: 'TYPE_REP_MAINTENANCE'
			}).then(res => {
				if (res.data.code == 9100) {
					this.typeList = res.data.info
				}
			})
		},
		// 查询故障原因
		getReason() {
			this.$api.post(global.apiUrls.selectType, {
				dictTypeCode: 'TYPE_REP_REASON'
			}).then(res => {
				if (res.data.code == 9100) {
					this.reasonList = res.data.info
				}
			})
		},
		// 查询设备状态
		getState() {
			this.$api.post(global.apiUrls.selectType, {
				dictTypeCode: 'TYPE_EM_STATE'
			}).then(res => {
				if (res.data.code == 9100) {
					this.stateList = res.data.info
				}
			})
		},
		// 获取审核信息
		getAnnounce() {
			this.$api.post(global.apiUrls.getAnnounceRepairById, {
				repId: this.repId,
				repState: this.repState
			}).then(res => {
				if (res.data.code == 9100) {
					this.audInfo = res.data.info
				}
			})
		},
		previewImg(item, type) {
			uni.previewImage({
				urls: [`${READ_FILE_URL}${item.fileCode}`]
			})
		},
		playVideo(e, type, i) {
		  // this.isPlay = true;
		  let that = this;
		  if (type == 'old') {
			  this.oldVideoContext = uni.createVideoContext(`oldVideo${i}`);
			  this.oldVideo[i].isPlay = true
			  setTimeout(() => {
			    that.oldVideoContext.requestFullScreen(0);
			    that.oldVideoContext.play();
			  }, 200);
		  } else if (type == 'new') {
			  this.newVideoContext = uni.createVideoContext(`newVideo${i}`);
			  this.newVideo[i].isPlay = true
			  setTimeout(() => {
			    that.newVideoContext.requestFullScreen(0);
			    that.newVideoContext.play();
			  }, 200);
		  } else {
			  this.videoContext = uni.createVideoContext(`myVideo${i}`);
			  this.form.videoList[i].isPlay = true
			  setTimeout(() => {
			    that.videoContext.requestFullScreen(0);
			    that.videoContext.play();
			  }, 200);
		  }
		  this.$forceUpdate();
		},
		fullscreenchange(e, i, type) {
			console.log(e);
			// 退出全屏时
			if (!e.detail.fullScreen) {
				if (type == 'old') {
					this.oldVideo[i].isPlay = false
					this.oldVideoContext.pause();
				} else if (type == 'new') {
					this.newVideo[i].isPlay = false
					this.newVideoContext.pause();
				} else {
					this.form.videoList[i].isPlay = false
					this.videoContext.pause();
				}
				this.$forceUpdate();
			}
		},
		videoEnd(e, i, type) {
			if (type == 'old') {
				this.oldVideoContext.exitFullScreen();
				this.oldVideo[i].isPlay = false
			} else if (type == 'new') {
				this.newVideoContext.exitFullScreen();
				this.newVideo[i].isPlay = false
			} else {
				this.videoContext.exitFullScreen();
				this.form.videoList[i].isPlay = false
			}
			this.$forceUpdate();
		},
		playAudio(item, i, type) {
			if (this.current == 0) {
				this.form.audioList[i].isPlay = !this.form.audioList[i].isPlay
				innerAudioContext.src = `${READ_FILE_URL}${item.fileCode}`
				if (this.form.audioList[i].isPlay) {
					this.form.audioList.forEach((res, index) => {
						if (index !== i) {
							res.isPlay = false
						}
					})
					innerAudioContext.play();
					this.$forceUpdate();
				} else {
					this.form.audioList.forEach((res, index) => {
						res.isPlay = false
					})
					innerAudioContext.pause();
					this.$forceUpdate();
				}
				innerAudioContext.onEnded(() => {
					this.form.audioList[i].isPlay = false
					this.$forceUpdate();
				})
			} else if (this.current == 2) {
				if (type == 'old') {
					this.oldAudio[i].isPlay = !this.oldAudio[i].isPlay
					innerAudioContext.src = `${READ_FILE_URL}${item.fileCode}`
					this.newAudio.forEach((res, index) => {
						res.isPlay = false
					})
					if (this.oldAudio[i].isPlay) {
						this.oldAudio.forEach((res, index) => {
							if (index !== i) {
								res.isPlay = false
							}
						})
						innerAudioContext.play();
						this.$forceUpdate();
					} else {
						this.oldAudio.forEach((res, index) => {
							res.isPlay = false
						})
						innerAudioContext.pause();
						this.$forceUpdate();
					}
					innerAudioContext.onEnded(() => {
						this.oldAudio[i].isPlay = false
						this.$forceUpdate();
					})
				} else {
					this.newAudio[i].isPlay = !this.newAudio[i].isPlay
					innerAudioContext.src = `${READ_FILE_URL}${item.fileCode}`
					this.oldAudio.forEach((res, index) => {
						res.isPlay = false
					})
					if (this.newAudio[i].isPlay) {
						this.newAudio.forEach((res, index) => {
							if (index !== i) {
								res.isPlay = false
							}
						})
						innerAudioContext.play();
						this.$forceUpdate();
					} else {
						this.newAudio.forEach((res, index) => {
							res.isPlay = false
						})
						innerAudioContext.pause();
						this.$forceUpdate();
					}
					innerAudioContext.onEnded(() => {
						this.newAudio[i].isPlay = false
						this.$forceUpdate();
					})
				}
			}
		},
		getData() {
			this.$api.post(global.apiUrls.getBasicRepairById, {
				repId: this.repId
			}).then(res => {
				if (res.data.code == 9100) {
					this.repState = res.data.info.repState
					this.form = res.data.info
					this.selectedItems = res.data.info.selectedItems || []
					this.form.videoList.forEach(item => {
						item.isPlay = false
					})
					this.form.audioList.forEach(item => {
						item.isPlay = false
					})
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			})
		},
		selectPartOrderOneByRepair() {
			this.$api.post(global.apiUrls.selectPartOrderOneByRepair, {
				id: this.repId
			}).then(res => {
				if (res.data.code == 9100) {
					this.partList = res.data.info
				}
			})
		},
		// 维修信息
		getMaintenance() {
			this.$api.post(global.apiUrls.getMaintenanceRepairById, {
				repId: this.repId,
				repState: this.repState
			}).then(res => {
				if (res.data.code == 9100) {
					this.mainInfo = res.data.info
					this.oldPics = []
					this.oldAudio = []
					this.oldVideo = []
					this.newPics = []
					this.newAudio = []
					this.newVideo = []
					if (this.mainInfo.picOldList) {
						this.mainInfo.picOldList.forEach(item => {
							let obj = {
								fileCode: item.fileCode
							}
							this.oldPics.push(obj)
						})
					}
					if (this.mainInfo.audioOldList) {
						this.mainInfo.audioOldList.forEach(item => {
							let obj = {
								url: `${READ_FILE_URL}${item.fileCode}`,
								isPlay: false,
								fileCode: item.fileCode,
								fileName: item.fileName
							}
							this.oldAudio.push(obj)
						})
					}
					if (this.mainInfo.videoOldList) {
						this.mainInfo.videoOldList.forEach(item => {
							let obj = {
								fileCode: item.fileCode,
								isPlay: false
							}
							this.oldVideo.push(obj)
						})
					}
					if (this.mainInfo.picNewList) {
						this.mainInfo.picNewList.forEach(item => {
							let obj = {
								fileCode: item.fileCode
							}
							this.newPics.push(obj)
						})
					}
					if (this.mainInfo.audioNewList) {
						this.mainInfo.audioNewList.forEach(item => {
							let obj = {
								url: `${READ_FILE_URL}${item.fileCode}`,
								isPlay: false,
								fileCode: item.fileCode,
								fileName: item.fileName
							}
							this.newAudio.push(obj)
						})
					}
					if (this.mainInfo.videoNewList) {
						this.mainInfo.videoNewList.forEach(item => {
							let obj = {
								fileCode: item.fileCode,
								isPlay: false
							}
							this.newVideo.push(obj)
						})
					}
					this.typeValue = {
						dictName: this.mainInfo.mtcFaultTypeName,
						dictValue: this.mainInfo.mtcFaultType
					}
					this.reasonValue = {
						dictName: this.mainInfo.mtcFaultReasonName,
						dictValue: this.mainInfo.mtcFaultReason
					}
					this.stateValue = {
						dictName: this.mainInfo.mtcEmStateName,
						dictValue: this.mainInfo.mtcEmState
					}
					this.mtcDesc = this.mainInfo.mtcDesc == 'null' ? '' : this.mainInfo.mtcDesc
					this.currentStatusAnalysis = this.mainInfo.currentStatusAnalysis == 'null' ? '' : this.mainInfo.currentStatusAnalysis
				}
			})
		},
		call(num) {
			uni.makePhoneCall({
				phoneNumber: num
			})
		},
		tabChange(e) {
			this.current = e
		},
		// 删除文件
		delFile(e, i, type) {
			// return
			if (type == 'oldAudio') {
				this.oldAudio.splice(i, 1)
			} else if (type == 'oldImg') {
				this.oldPics.splice(i, 1)
			} else if (type == 'oldVideo') {
				this.oldVideo.splice(i, 1)
			} else if (type == 'newAudio') {
				this.newAudio.splice(i, 1)
			} else if (type == 'newImg') {
				this.newPics.splice(i, 1)
			} else if (type == 'newVideo') {
				this.newVideo.splice(i, 1)
			}
			if (!e.isUpload) {
				this.$api.post(global.apiUrls.deleteFile, {
					fileCode: e.fileCode
				}).then(res => {
					if (res.data.code == 9100) {
						console.log(res)
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			}
		},
		// 拒单
		refuse() {
			this.$api.post(global.apiUrls.refuseRepair, {
				id: this.mainInfo.id
			}).then(res => {
				if (res.data.code == 9100) {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			})
		},
		// 暂停
		suspend() {
			let type = this.repState == 7 ? 1 : 2
			this.$api.post(global.apiUrls.suspendRepair, {
				id: this.mainInfo.id,
				type: type //1暂停 2恢复
			}).then(res => {
				if (res.data.code == 9100) {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					if (type == 1) {
						this.repState = 8
					} else {
						this.repState = 7
					}
					this.init();
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			})
		},
		// 备件申请
		apply() {
			uni.navigateTo({
				url: `/pages/spare-parts/out-apply/index?id=${this.form.repId}&code=${this.form.workOrderCode}&type=rep`
			})
		},
		// 保存
		save() {
			let oldAudioCode = []
			let newAudioCode = []
			let oldPics = []
			let newPics = []
			let oldVideo = []
			let newVideo = []
			this.oldAudio.forEach(item => {
				oldAudioCode.push(item.fileCode)
			})
			this.newAudio.forEach(item => {
				newAudioCode.push(item.fileCode)
			})
			this.oldPics.forEach(item => {
				oldPics.push(item.fileCode)
			})
			this.newPics.forEach(item => {
				newPics.push(item.fileCode)
			})
			this.oldVideo.forEach(item => {
				oldVideo.push(item.fileCode)
			})
			this.newVideo.forEach(item => {
				newVideo.push(item.fileCode)
			})
			if((!this.stateValue.dictValue || !this.typeValue.dictValue || !this.reasonValue.dictValue || !this.mtcDesc || this.newPics.length <1) && this.current === 2){
				uni.showToast({
					title: '请确认必填信息',
					icon: 'none'
				})
				return;
			}
			
			this.$api.post(global.apiUrls.insertSuspendRepair, {
				id: this.mainInfo.id,
				mtcEmState: this.stateValue.dictValue || 0, //设备状态
				mtcStateDesc: this.stateValue.dictName || '',
				mtcFaultType: this.typeValue.dictValue || 0,
				mtcFaultReason: this.reasonValue.dictValue || 0,
				mtcDesc: this.mtcDesc, //处理方法及结果
				currentStatusAnalysis: this.currentStatusAnalysis, //现状分析
				fileOldPicCode: oldPics.join(','), //维修前图片
				fileOldAudioCode: oldAudioCode.join(','), //维修前音频
				fileOldVideoCode: oldVideo.join(','), //维修前视频
				fileNewPicCode: newPics.join(','), //维修后图片
				fileNewAudioCode: newAudioCode.join(','), //维修后音频
				fileNewVideoCode: newVideo.join(','), //维修后视频
			}).then(res => {
				if (res.data.code == 9100) {
					uni.showToast({
						title: '保存成功',
						icon: 'none'
					})
					return this.$api.post(global.apiUrls.getBasicRepairUpdateById,{
						repId: this.form.repId,
						maintenEmployeeUsersId: this.selectedItems.length ? this.selectedItems.map(item => item.id).join(',') : null, //维修组人员id
					}).then((res=>{
						if(res.data.code != 9100) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
						this.init();
					}))
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			})
		},
		// 维修完成
		completed() {
			if (!this.typeValue.dictValue) {
				uni.showToast({
					title: '请选择故障类型',
					icon: 'none'
				})
				return
			}
			if (!this.reasonValue.dictValue) {
				uni.showToast({
					title: '请选择故障原因',
					icon: 'none'
				})
				return
			}
			if (!this.stateValue.dictValue) {
				uni.showToast({
					title: '请选择设备状态',
					icon: 'none'
				})
				return
			}
			if (!this.mtcDesc) {
				uni.showToast({
					title: '请输入处理方法及结果',
					icon: 'none'
				})
				return
			}
			if (!this.currentStatusAnalysis) {
				uni.showToast({
					title: '请输入现状分析',
					icon: 'none'
				})
				return
			}
			if (!this.newPics.length) {
				uni.showToast({
					title: '维修后图片未上传，请上传',
					icon: 'none'
				})
				return
			}
			let oldAudioCode = []
			let newAudioCode = []
			let oldPics = []
			let newPics = []
			let oldVideo = []
			let newVideo = []
			this.oldAudio.forEach(item => {
				oldAudioCode.push(item.fileCode)
			})
			this.newAudio.forEach(item => {
				newAudioCode.push(item.fileCode)
			})
			this.oldPics.forEach(item => {
				oldPics.push(item.fileCode)
			})
			this.newPics.forEach(item => {
				newPics.push(item.fileCode)
			})
			this.oldVideo.forEach(item => {
				oldVideo.push(item.fileCode)
			})
			this.newVideo.forEach(item => {
				newVideo.push(item.fileCode)
			})
			this.$api.post(global.apiUrls.completeRepair, {
				id: this.mainInfo.id,
				mtcEmState: this.stateValue.dictValue || 0, //设备状态
				mtcStateDesc: this.stateValue.dictName || '',
				mtcFaultType: this.typeValue.dictValue || 0,
				mtcFaultReason: this.reasonValue.dictValue || 0,
				mtcDesc: this.mtcDesc, //处理方法及结果
				currentStatusAnalysis: this.currentStatusAnalysis, //分析结果
				fileOldPicCode: oldPics.join(','), //维修前图片
				fileOldAudioCode: oldAudioCode.join(','), //维修前音频
				fileOldVideoCode: oldVideo.join(','), //维修前视频
				fileNewPicCode: newPics.join(','), //维修后图片
				fileNewAudioCode: newAudioCode.join(','), //维修后音频
				fileNewVideoCode: newVideo.join(',') //维修后视频
			}).then(res => {
				if (res.data.code == 9100) {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					
					return this.$api.post(global.apiUrls.getBasicRepairUpdateById,{
						repId: this.form.repId,
						maintenEmployeeUsersId: this.selectedItems.length ? this.selectedItems.map(item => item.id).join(',') : null, //维修组人员id
					}).then((res=>{
						if(res.data.code != 9100) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					}))
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			})
		},
		async checkRecord(e) {
		  try {
		    let checkResult = await permission("record");
		    console.log("检测信息：", checkResult);
		    if (checkResult.code == 1) {
		      let result = checkResult.data;
		      if (result == 1) {
		        console.log("授权成功!");
				let that = this
				if (this.isTouchEnd) return
				console.log(recorderManager)
				recorderManager.onStop((res) => {
					console.log(777);
					console.log(res);
					// that.userInfo.remark = res.tempFilePath;
				})
				console.log(555, recorderManager);
				that.startPoint = e.touches[0]; //记录长按时开始点信息，后面用于计算上划取消时手指滑动的距离。
				that.longPress = '2';
				that.VoiceText = '说话中...';
				const options = {
					// duration: that.duration, // 指定录音的时长，单位 ms
					// sampleRate: 16000, // 采样率
					numberOfChannels: 1, // 录音通道数
					// encodeBitRate: 96000, // 编码码率
					format: 'mp3', // 音频格式，有效值 aac/mp3
					frameSize: 10, // 指定帧大小，单位 KB
				}
				recorderManager.start(options);
				// 监听音频开始事件
				that.sendLock = false; //长按时是不上锁的。
				recorderManager.onStart((res) => {
					console.log(1111222)
				})
				// 	},
				// 	fail: (res) => {
				// 		uni.showToast({
				// 			title: '喊话失败',
				// 			icon: 'none'
				// 		})
				// 	}
				// })
		      }
		      if (result == 0) {
		        console.log("授权已拒绝!");
				uni.showToast({
					title: '麦克风权限未开启',
					icon: 'none'
				})
		      }
		      if (result == -1) {
		        console.log("您已永久拒绝麦克风权限，请在应用设置中手动打开!");
				uni.showToast({
					title: '您已永久拒绝麦克风权限，请在应用设置中手动打开!',
					icon: 'none'
				})
		      }
		    }
		  } catch (err) {
		    console.log("授权失败：", err);
		  }
		},
		// 语音开始
		longpressBtn(e) {
			this.isTouchEnd = false
			this.checkRecord(e);
		},
		handleTouchMove(e) {
			//touchmove时触发
			var moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移动距离
			if (Math.abs(moveLenght) > 70) {
				// wx.showToast({
				//       title: "松开手指,取消发送",
				//       icon: "none",
				//       duration: 60000
				// });
				// console.log("松开手指,取消发送");
				this.VoiceTitle = "松开手指,取消发送";
				this.VoiceText = '松开手指,取消发送';
				this.delBtn()
				this.sendLock = true; //触发了上滑取消发送，上锁
			} else {
				// wx.showToast({
				//       title: "正在录音，上划取消发送",
				//       icon: "none",
				//       duration: 60000
				// });
				this.VoiceTitle = "松手结束录音";
				this.VoiceText = '松手结束录音';
				this.sendLock = false; //上划距离不足，依然可以发送，不上锁
			}
		},
		touchendBtn(e, type) {
			console.log('end', recorderManager)
			this.isTouchEnd = true
			this.longPress = '1';
			this.VoiceText = '按住 说话';
			this.VoiceTitle = '松手结束录音'
			recorderManager.onStop((res) => {
				console.log(this.sendLock);
				if (this.sendLock) {
					//上锁不发送
				} else { //解锁发送，发送网络请求
					if (res.duration < 1000)
						uni.showToast({
							title: "录音时间太短",
							icon: "none",
							duration: 1000
						});
					else {
						// this.userInfo.remark = res.tempFilePath
						console.log('end', res)
						let that = this
						uni.showLoading({
							mask: true,
							title: '上传中...'
						})
						uni.uploadFile({
							url: UPLOAD_IMAGE_URL,
							filePath: res.tempFilePath,
							fileType: 'audio',
							name: 'files',
							header: {
								'Authorization': global.token
							},
							formData: {
								'module': '',
								'dir': ''
							},
							success: (child) => {
								console.log(child)
								let data = JSON.parse(child.data);
								if (data.code == 9100) {
									// this.audio = data.info[0]
									const now = new Date();
									const year = now.getFullYear();
									const MM = `0${now.getMonth() + 1}`
									const month = MM.slice(-2)
									const dd = `0${now.getDate()}`
									const day = dd.slice(-2)
									const hh = `0${now.getHours()}`.slice(-2)
									const mm = `0${now.getMinutes()}`.slice(-2)
									const ss = `0${now.getSeconds()}`.slice(-2)
									let time = year + month + day + hh + mm + ss
									let path = `${READ_FILE_URL}${data.info[0]}`
									let obj = {
										url: path,
										isPlay: false,
										fileCode: data.info[0],
										fileName: time,
										isUpload: true
									}
									if (type == 'old') {
										that.oldUploadAudio.push(obj)
										that.oldAudio.push(obj)
									} else {
										that.newUploadAudio.push(obj)
										that.newAudio.push(obj)
									}
								} else {}
							},
							complete: () => {
								uni.hideLoading()
							}
						});
					}
				}
			})
		
			// this.recordingTimer(this.time)
			recorderManager.stop(); //结束录音
		},
		touchAudioBtn() {
			
		},
		delBtn() {
			this.delShow = false;
			this.time = 0
			// this.VoiceTitle = '松手结束录音'
		},
		// 上传图片/视频
		uploadImg(type, state) {
			if (type == 'img') {
				uni.chooseImage({
					sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						new UploadImage(tempFilePaths, {
							complete: (item) => {
								if (state == 'old') {
									item.forEach(data => {
										let obj = {
											fileCode: data,
											isUpload: true
										}
										// this.oldUploadImgs.push(data)
										this.oldPics.push(obj)
									})
								} else {
									item.forEach(data => {
										let obj = {
											fileCode: data,
											isUpload: true
										}
										// this.newUploadImgs.push(data)
										this.newPics.push(obj)
									})
								}
							}
						})
					}
				})
			} else if (type == 'video') {
				uni.chooseVideo({
					maxDuration: 60,
					count: 1,
					success: res => {
						uni.showLoading({
							title: '上传中...'
						});
						let videoFile = res.tempFilePath;
						let size = Math.ceil(res.size/1024/1024);
						if(size > 50 ) {
							uni.hideLoading();
							uni.showToast({
								title: '视频大小不能超过50M',
								icon: 'none'
							})
							return
						}
						this.uploadVideo(res, state)
					}
				})
			}
		},
		// 上传视频
		uploadVideo(file, state) {
			let _this = this
			// const aliyunFileKey = 'image/' + new Date().getTime() + Math.floor(Math.random() * 150) + '.mp4';
			uni.uploadFile({
				url: UPLOAD_IMAGE_URL,
				files: [{
					name: 'files',
					file: file.tempFile,
					uri: file.tempFilePath
				}],
				// name: 'file',
				fileType: 'video',
				header: {
				  'Authorization': global.token || ''
				  // "Content-Type": "multipart/form-data"
				},
				// formData: {
				// 	'files': file.tempFile
				// },
				success: res => {
					console.log(res, 'resres')
					let data = JSON.parse(res.data)
					if (data.code == 9100) {
						uni.hideLoading();
						// let fileData = {}
						let info = data.info
						if (state == 'old') {
							info.forEach(item => {
								// _this.oldUploadVideo.push(item)
								let obj = {
									fileCode: item,
									isPlay: false,
									isUpload: true
								}
								_this.oldVideo.push(obj)
							})
						} else {
							info.forEach(item => {
								// _this.newUploadVideo.push(item)
								let obj = {
									fileCode: item,
									isPlay: false,
									isUpload: true
								}
								_this.newVideo.push(obj)
							})
						}
					} else {
					  uni.hideLoading();
					  uni.showToast({
					  	title: '上传失败，请重试',
						icon: 'none'
					  })
					}
				},
				complete: () => {
				  setTimeout(function () {
					  uni.hideLoading();
				  }, 1000);
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f3f5f8;
}
.tab-box {
	position: fixed;
	width: 100%;
	top: 150rpx;
	z-index: 99;
	background-color: #fff;
	height: 88rpx;
	display: flex;
	align-items: center;
	.tab {
		flex: 1;
		text-align: center;
		position: relative;
		line-height: 88rpx;
		font-size: 28rpx;
	}
	.tab-active {
		color: #0f68f0;
		&::after {
			content: '';
			width: 80%;
			height: 6rpx;
			background-color: #0f68f0;
			border-radius: 4rpx;
			position: absolute;
			bottom: 8rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
		}
	}
}
.tit-box {
	padding: 24rpx;
	display: flex;
	.title {
		flex: 1;
		font-weight: bold;
		font-size: 32rpx;
	}
	.state {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		.icon {
			width: 42rpx;
			height: 42rpx;
			margin-right: 8rpx;
		}
		text {
			font-size: 26rpx;
			color: #f85d76;
		}
	}
}
.con-box {
	background-color: #fff;
	padding: 0 24rpx;
	.item {
		padding: 24rpx 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		font-size: 28rpx;
		.label {
			width: 260rpx;
			margin-right: 16rpx;
			flex-shrink: 0;
		}
		.con {
			flex: 1;
			word-wrap: break-word;
			overflow: hidden;
			.tel {
				width: 40rpx;
				height: 40rpx;
				flex-shrink: 0;
			}
			.play {
				width: 32rpx;
				height: 32rpx;
				flex-shrink: 0;
				margin-right: 12rpx;
			}
			.audio {
				color: #6c8bb6;
				text-decoration: underline;
			}
			.img {
				width: 150rpx;
				height: 100rpx;
				margin-right: 12rpx;
			}
			.v-img {
				width: 150rpx;
				height: 100rpx;
				margin-right: 12rpx;
				position: relative;
				.img {
					width: 100%;
					height: 100%;
					background-color: #000;
				}
				.v-play {
					position: absolute;
					width: 44rpx;
					height: 44rpx;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
				}
			}
			.video {
				width: 150rpx;
				height: 100rpx;
				margin-right: 12rpx;
			}
			.audstate {
				background-color: #0f68f0;
				border-radius: 16rpx;
				color: #fff;
				display: inline-block;
				padding: 0 10rpx;
			}
		}
	}
}
.bj-item {
	.img {
		width: 120rpx;
		height: 120rpx;
	}
	.add {
		width: 28rpx;
		height: 28rpx;
	}
}

.zs-box {
	.t-icon {
		width: 44rpx;
	}
	.arrow-b {
		width: 22rpx;
	}
	.search-box {
		background-color: #f2f2f2;
		border-radius: 50rpx;
		.search-icon {
			width: 44rpx;
			height: 44rpx;
		}
		.pla-ipt {
			font-size: 28rpx;
			color: #b9b9b9;
		}
		.ipt {
			font-size: 28rpx;
		}
	}
}
.zs-list {
	.title {
		color: rgba(51, 51, 51, 0.8);
	}
	.img {
		width: 210rpx;
		height: 210rpx;
	}
}

.bottom-wrap {
	height: 160rpx;
	.bottom {
		padding: 24rpx 32rpx;
		position: fixed;
		bottom: 0;
		height: 160rpx;
		box-sizing: border-box;
		display: flex;
		width: 100%;
		align-items: center;
		z-index: 99;
		.btn {
			width: 23%;
			height: 80rpx;
			border-radius: 10rpx;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			font-size: 34rpx;
		}
		.btn2 {
			width: 220rpx;
			height: 80rpx;
			border-radius: 10rpx;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			font-size: 34rpx;
		}
		.left {
			background-color: #d9001b;
		}
		.right {
			background-color: #0f68f0;
		}
		.lingqu {
			background-color: #f85d76;
		}
		.zhipai {
			background-color: #f59a23;
		}
		.bg-5f {
			background-color: #db5f5f;
		}
		.bg-218cfa {
			background-color: #218cfa;
		}
	}
}
.arrow-r {
	width: 32rpx;
	height: 32rpx;
	margin-left: 8rpx;
}
.pla-tra {
	color: #aeadad;
}
.tra {
	font-size: 26rpx;
	padding: 24rpx;
	height: 150rpx;
}
.wx-item {
	padding: 32rpx 0;
	.label {
		margin-right: 24rpx;
	}
	.con {
		justify-content: right;
	}
	.ipt {
		text-align: right;
		font-size: 28rpx;
	}
	.arrow-r {
		width: 32rpx;
		height: 32rpx;
		margin-left: 8rpx;
	}
	.play {
		width: 32rpx;
		height: 32rpx;
		flex-shrink: 0;
		margin-right: 12rpx;
	}
	.audio {
		color: #6c8bb6;
		text-decoration: underline;
	}
	.img-box {
		width: 32%;
		height: 100rpx;
		margin-right: 1.3%;
		position: relative;
		margin-bottom: 12rpx;
		&:nth-of-type(3n) {
			margin-right: 0;
		}
		.v-play {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}
		.img {
			width: 100%;
			height: 100%;
		}
		.close {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			z-index: 9;
			top: -8rpx;
			right: -8rpx;
		}
	}
	.a-icon {
		width: 68rpx;
	}
	.i-icon {
		width: 80rpx;
	}
}
.record-layer {
	display: none;
}
.record-layer1 {
	width: 100vw;
	// padding: 300px 0;
	box-sizing: border-box;
	height: 100vh;
	position: fixed;
	background-color: rgba(0, 0, 0, .6);
	z-index: 101;
	bottom: 0vh;
	left: 0;
	display: flex;
	align-items: flex-end;
}
.record-box {
	width: 100%;
	position: relative;
}

.record-box1 {
	width: 100%;
	position: relative;
	// bottom: -83vh;
	height: 17vh;
}
.record-btn-layer {
		width: 100%;
	}

	.record-btn-layer button::after {
		border: none;
		transition: all 0.1s;
	}

	.record-btn-layer button {
		font-size: 14px;
		line-height: 50px;
		width: 100%;
		height: 50px;
		border-radius: 8px;
		text-align: center;
		background: #FFD300;
		transition: all 0.1s;
	}

	.record-btn-layer button image {
		width: 16px;
		height: 16px;
		margin-right: 4px;
		vertical-align: middle;
		transition: all 0.3s;
	}

	.record-btn-layer .record-btn-1 {
		background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
		color: #000000 !important;

	}

	.record-btn-layer .record-btn-2 {
		border-radius: 168rpx 168rpx 0 0;
		height: 17vh;
		line-height: 17vh;
		transition: all 0.3s;
	}
	/* 提示小弹窗 */
	.prompt-layer {
		border-radius: 15px;
		background: #95EB6C;
		padding: 8px 16px;
		box-sizing: border-box;
		position: absolute;
		left: 50%;
		height: 11vh;
		transform: translateX(-50%);
		transition: all 0.3s;
	}
	
	.prompt-layer::after {
		content: '';
		display: block;
		border: 12px solid rgba(0, 0, 0, 0);
		border-radius: 10rpx;
		border-top-color: #95EB6C;
		position: absolute;
		bottom: -46rpx;
		left: 50%;
		transform: translateX(-50%);
		transition: all 0.3s;
	}
	
	//取消动画
	.prompt-layer1 {
		border-radius: 15px;
		background: #FB5353;
		padding: 8px 16px;
		box-sizing: border-box;
		position: absolute;
		left: 50%;
		height: 11vh;
		transform: translateX(-50%);
		transition: all 0.3s;
	}
	
	.prompt-layer1::after {
		content: '';
		display: block;
		border: 12px solid rgba(0, 0, 0, 0);
		border-radius: 10rpx;
		border-top-color: #FB5353;
		position: absolute;
		bottom: -46rpx;
		left: 50%;
		transform: translateX(-50%);
		transition: all 0.3s;
	}
	
	.prompt-layer-1 {
		font-size: 12px;
		width: 150px;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		top: -400rpx;
	}
	
	.prompt-layer-1 .p {
		color: #000000;
	}
	
	.prompt-layer-1 .span {
		color: rgba(0, 0, 0, .6);
	}
	
	.prompt-loader .em {}
	
	/* 语音音阶------------- */
	.prompt-loader {
		width: 110px;
		height: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin-bottom: 6px;
	}
	
	.prompt-loader .em {
		display: block;
		background: #0FBA75;
		width: 2px;
		height: 10%;
		margin-right: 2.5px;
		float: left;
	}
	
	.prompt-loader .em:last-child {
		margin-right: 0px;
	}
	
	.prompt-loader .em:nth-child(1) {
		animation: load 2.5s 1.4s infinite linear;
	}
	
	.prompt-loader .em:nth-child(2) {
		animation: load 2.5s 1.2s infinite linear;
	}
	
	.prompt-loader .em:nth-child(3) {
		animation: load 2.5s 1s infinite linear;
	}
	
	.prompt-loader .em:nth-child(4) {
		animation: load 2.5s 0.8s infinite linear;
	}
	
	.prompt-loader .em:nth-child(5) {
		animation: load 2.5s 0.6s infinite linear;
	}
	
	.prompt-loader .em:nth-child(6) {
		animation: load 2.5s 0.4s infinite linear;
	}
	
	.prompt-loader .em:nth-child(7) {
		animation: load 2.5s 0.2s infinite linear;
	}
	
	.prompt-loader .em:nth-child(8) {
		animation: load 2.5s 0s infinite linear;
	}
	
	.prompt-loader .em:nth-child(9) {
		animation: load 2.5s 0.2s infinite linear;
	}
	
	.prompt-loader .em:nth-child(10) {
		animation: load 2.5s 0.4s infinite linear;
	}
	
	.prompt-loader .em:nth-child(11) {
		animation: load 2.5s 0.6s infinite linear;
	}
	
	.prompt-loader .em:nth-child(12) {
		animation: load 2.5s 0.8s infinite linear;
	}
	
	.prompt-loader .em:nth-child(13) {
		animation: load 2.5s 1s infinite linear;
	}
	
	.prompt-loader .em:nth-child(14) {
		animation: load 2.5s 1.2s infinite linear;
	}
	
	.prompt-loader .em:nth-child(15) {
		animation: load 2.5s 1.4s infinite linear;
	}
	@keyframes load {
		0% {
			height: 10%;
		}
	
		50% {
			height: 100%;
		}
	
		100% {
			height: 10%;
		}
	}
	
	.prompt-loader .em.pause {
		animation-play-state: paused;
	}
	
	/* 语音音阶-------------------- */
	.prompt-layer-2 {
		top: -40px;
	}
	
	.prompt-layer-2 .text {
		color: rgba(0, 0, 0, 1);
		font-size: 12px;
	}
	.no-data {
		min-height: 260rpx;
		.img {
			width: 160rpx;
			margin-top: 32rpx;
		}
	}
.border-b {
	border-bottom: 1rpx solid #f2f2f2;
}
.required-star {
  color: red; 
  font-size: 36rpx; 
  margin-right: 8rpx; 
}
</style>